<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link href="../static/images/me.jpg" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>

<br>
<br>
<br>
<div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
    <div class="ur container">
        <div class="ui middle aligned center aligned grid">
            <div class="column">
                <h2 class="ui teal image header">
                    <div class="content" style="color: #0a001f" >
                        欢迎登录(
                        <a th:href="@{/logon}">去注册</a>
                        )
                    </div>
                </h2>
                <form class="ui large form" method="post" action="/login">
                    <div class="ui  segment">
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input class="email" th:value="${user!= null ? user.getEmail:''}" type="text" name="email" placeholder="邮箱">
                            </div>
                        </div>
                        <div class="field">
                            <div class="ui left icon input">
                                <i class="lock icon"></i>
                                <input class="password" th:value="${user != null ? user.getPassword():''}" type="password" name="password" placeholder="密码">

                            </div>
                        </div>

                        <div class="fields">
                            <div class="field eight wide">
                                <input class="verify" name="verify" type="text" placeholder="验证码">
                            </div>
                            <div class="field">
                                <img id="imgVerify" src="/getVerify"  onclick="getVerify(this);" style="width: 12em;height: 3em">
                            </div>
                        </div>

                        <div class="ui checked checkbox" style="float: left">
                            <input type="checkbox" checked="" name="remember">
                            <label>记住密码</label>
                        </div>

                        <button class="ui fluid large teal submit button">登 录</button>

                    </div>

                    <div class="ui mini message" th:text="${msg}">
                    </div>

                </form>

            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>


<script>

    function changeImg(){
        var img = document.getElementById("imgVerify");
        img.src = "/getImg?date=" + new Date();
    }

    //获取验证码
    function getVerify() {
        // $("#imgCode").on("click", function() {
        $("#imgVerify").attr("src", '/getVerify?'+new Date().getSeconds());//jquery方式
        // });

    }



    $('.ui.form').form({
        fields: {
            email: {
                identifier: 'email',
                rules: [{
                    type: 'empty',
                    prompt: '请输入用户名'
                }]
            },
            password: {
                identifier: 'password',
                rules: [{
                    type: "empty",
                    prompt: '请输入密码'
                }]
            },
            verify: {
                identifier: 'verify',
                rules: [{
                    type: "empty",
                    prompt: '请输入验证码'
                }]
            }
        }

    });
</script>

</body>
</html>